<template>
<div class="box">
    <img src="http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg" alt="">
    <p @click="colorChange(obj.dogName)" :style="{background:bgColor}">{{obj.dogName}}</p>
</div>
</template>
 
<script>
export default {
  components: {},
  props: {
    obj:{
        type : Object,
        required : true,
    }
  },
  data() {
    return {
        bgColor:''
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    colorChange(name){
        this.bgColor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`
        this.$emit('dog',name)
    }
  }
};
</script>

<style scoped>
     .box{
        width: 200px;
        height: 250px;
        border: 1px solid;
        float: left;
        text-align: center;
        overflow: hidden;
     }
     .box img{
        width: 200px;
        height: 200px;
     }
</style>